<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-27 09:36:03
 * @FilePath: \wczd-mobile\src\pages\danger\danger-loop-edit.vue
-->
<template>
  <div class="danger-loop-edit">
    <secondTopPanel>
      <div slot='title'>查看详情</div>
    </secondTopPanel>
    <div class="scroll">
      <swiper v-if="_swiperData.length!==0" class="swiper" circular indicator-dots autoplay>
        <swiper-item v-for="(item ,index) in _swiperData" :key="index">
          <image v-if="item.type==='image'" mode="aspectFit" class="swiper-item" :src="item.url+'?token='+token" style="width:100%,height:100%">
          </image>
          <video v-if="item.type==='video'" class="swiper-item" :src="item.url+'?token='+token" style="width:100%,height:100%">
          </video>
        </swiper-item>
      </swiper>
      <div class="model-title">一、隐患信息</div>
      <evanForm class="evan-form" :label-style="{width:'180upx',paddingRight:'20upx'}" :model='formData'>
        <evanFormItem label='隐患名称' prop="dangerName">
          {{formData.dangerName}}
        </evanFormItem>
        <evanFormItem label='地点' prop="dangerAddress">
          {{formData.dangerAddress}}
        </evanFormItem>
        <evanFormItem label='创建时间' prop="createTime">
          {{formData.createTime}}
        </evanFormItem>
        <evanFormItem label='隐患类型' prop='dangerType'>
          {{ formData.dangerType }}<span v-if="formData.dangerType2">/{{ formData.dangerType2 }}</span>
        </evanFormItem>
        <evanFormItem label='隐患等级' prop='isBig'>
          <span v-for="(item,index) in dangerBig" :key="'dangerBig'+index">
            <span v-if="item.dictValue===formData.isBig">
              {{ item.dictLabel }}
            </span>
          </span>
        </evanFormItem>
        <evanFormItem label='发现人' prop='findUsername'>
          {{formData.findUsername}}
        </evanFormItem>
        <evanFormItem label='联系电话' prop='contactPhone'>
          {{formData.contactPhone}}
        </evanFormItem>
        <evanFormItem label='具体情况(含建议)' prop="dangerContent">
          {{formData.dangerContent}}
        </evanFormItem>
        <evanFormItem label='照片' prop="recUrlsParse" label-position='top'>
          <ImageUpload v-if="formData.dangerUrlsParse" :remove="false" :_max="formData.dangerUrlsParse.length" :imgUrlData='formData.dangerUrlsParse'></ImageUpload>
        </evanFormItem>
        <evanFormItem label='视频' prop="revVideoUrlsParse" label-position='top'>
          <ImageUpload v-if="formData.videoUrlsParse" :_mediaType="'video'" :remove="false" :_max="formData.videoUrlsParse.length" :imgUrlData='formData.videoUrlsParse'></ImageUpload>
        </evanFormItem>
        <template v-if="formData.isScene==='1'">
          <evanFormItem label='现场整改描述' :label-style="{width:'220upx',paddingRight:'20upx'}">
            <input class="form-input" disabled v-model="formData.sceneContent" type="text" placeholder="">
          </evanFormItem>
          <evanFormItem label='现场整改图片' label-position='top' prop='sceneImageUrls' :label-style="{width:'220upx',paddingRight:'20upx'}">
            <ImageUpload @imageUrlCallBack='imageUrlCallBack' :remove="false" :_max="formData.sceneImageUrlsParse.length" :imgUrlData='formData.sceneImageUrlsParse'></ImageUpload>
          </evanFormItem>
          <evanFormItem label='现场整改视频' label-position='top' prop='sceneVideoUrls' :label-style="{width:'220upx',paddingRight:'20upx'}">
            <ImageUpload :_mediaType="'video'" :remove="false" :_max="formData.sceneVideoUrlsParse.length" @imageUrlCallBack='videoUrlCallBack' :imgUrlData='formData.sceneVideoUrlsParse'></ImageUpload>
          </evanFormItem>
        </template>
      </evanForm>

      <div class="model-title">二、隐患分配</div>
      <div v-for="(item,index) in ZGFormList" :key="'ZGFormList'+index">
        <evanForm ref="form" v-if="formData!=={}&&formData.isDanger!=='0'" class="evan-form" :label-style="{width:'200upx',paddingRight:'20upx'}" :model='item'>
          <evanFormItem label='整改部门' prop="recDeptname">
            <input class="form-input" v-model="item.recDeptname" disabled type="text" placeholder="">
          </evanFormItem>
          <evanFormItem label='整改人' prop="recUsername">
            <input class="form-input" v-model="item.recUsername" disabled type="text" placeholder="">
          </evanFormItem>
          <evanFormItem label='整改开始时间' prop="rec_time">
            <input class="form-input" v-model="item.requireStartTm" disabled type="text" placeholder="">
          </evanFormItem>
          <evanFormItem label='整改结束时间' prop="rec_time">
            <input class="form-input" v-model="item.requireEndTm" disabled type="text" placeholder="">
          </evanFormItem>
          <evanFormItem label='验收部门' prop="checkDeptname">
            <input class="form-input" v-model="item.checkDeptname" disabled type="text" placeholder="">
          </evanFormItem>
          <evanFormItem label='验收人' prop="checkUsername">
            <input class="form-input" v-model="item.checkUsername" disabled type="text" placeholder="">
          </evanFormItem>
        </evanForm>
      </div>

      <div class="model-title">三、整改详情</div>
      <evanForm class="evan-form" :label-style="{width:'200upx',paddingRight:'20upx'}" v-for="(item,index) in ZGformData" :key="index" :model='item'>
        <evanFormItem label='整改人' prop="recUsername">
          <input class="form-input" v-model="item.recUsername" disabled type="text" placeholder="">
        </evanFormItem>
        <evanFormItem label='整改反馈内容' prop="recContent">
          <input class="form-input" v-model="item.recContent" disabled type="text" placeholder="">
        </evanFormItem>
        <evanFormItem label='整改照片' prop="recUrlsParse" label-position='top'>
          <ImageUpload @imageUrlCallBack='imageUrlCallBack' :remove="false" :_max="item.revVideoUrlsParse.length" :imgUrlData='item.recUrlsParse'></ImageUpload>
        </evanFormItem>
        <evanFormItem label='整改视频' prop="revVideoUrlsParse" label-position='top'>
          <ImageUpload :_mediaType="'video'" :remove="false" :_max="item.revVideoUrlsParse.length" @imageUrlCallBack='videoUrlCallBack' :imgUrlData='item.revVideoUrlsParse'></ImageUpload>
        </evanFormItem>
      </evanForm>

      <div class="model-title">四、验收详情</div>
      <evanForm class="evan-form" :label-style="{width:'200upx',paddingRight:'20upx'}" v-for="(item,index) in ZGformData" :key="'aaa'+index" :model='item'>

        <evanFormItem label='验收评语' prop="piContent">
          <input class="form-input" v-model="item.piContent" disabled type="text" placeholder="">
        </evanFormItem>
      </evanForm>
    </div>
  </div>
</template>

<script>
import ImageUpload from "@/pages/component/imageUpload/imageUpload.vue";
import secondTopPanel from '@/pages/component/top-panel/secondTopPanel.vue'
import evanForm from '@/components/evan-form/evan-form.vue'
import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
import uniDatetimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue'
import { rectifyInfoList, dangerInfoOne } from "@/api/danger";
import { getToken } from '@/utils/auth'//获取token

export default {
  name: 'danger-loop-edit',
  components: { secondTopPanel, evanForm, evanFormItem, uniDatetimePicker, ImageUpload },
  data () {
    return {
      dangerBig: [],
      ZGFormList: [],
      ZGformData: [],
      formData: {},
      token: (getToken() ? 'Bearer ' + getToken() : '')
    }
  },
  computed: {
    _swiperData () {
      let imageData = []
      let videoData = []
      if (this.formData.dangerUrlsParse && this.formData.dangerUrlsParse.length !== 0) {
        this.formData.dangerUrlsParse.forEach(element => {
          imageData.push({ 'url': process.uniEnv.baseUrl + '/profile' + element.url, type: 'image' })
        });
      }
      if (this.formData.videoUrlsParse && this.formData.videoUrlsParse.length !== 0) {
        this.formData.videoUrlsParse.forEach(element => {
          videoData.push({ 'url': process.uniEnv.baseUrl + '/profile' + element.url, type: 'video' })
        });
      }
      return [...imageData]
    }
  },
  created () {
    this.getDicts('danger_big').then((response) => {
      this.dangerBig = response.data
    })
  },
  onLoad: function (option) {
    this._dangerInfoOne(option.dangerId)
    this._rectifyInfoList(option.dangerId)
  },
  methods: {
    reset () {
      this.formData = {
        id: null,
        dangerSource: null,
        dangerName: null,
        dangerAddress: null,
        findTime: null,
        dangerType: null,
        dangerType2: null,
        findUsername: null,
        contactPhone: null,
        dangerContent: null,
        dangerUrls: null,
        videoUrls: null,
        dangerUrlsParse: null,
        videoUrlsParse: null,
        sceneImageUrls: null,
        sceneVideoUrls: null,
        sceneImageUrlsParse: null,
        sceneVideoUrlsParse: null,
        isScene: null,
        isDanger: null,
        sceneContent: null,
        createTime: null,
        isBig: null
      }
    },
    // 获取隐患单条
    _dangerInfoOne (dangerId) {
      this.reset()
      dangerInfoOne({ id: dangerId }).then(res => {
        let item = res.data
        for (let d in this.formData) {
          this.formData[d] = item[d]
        }
        this.formData.dangerUrlsParse = JSON.parse(item.dangerUrls || '[]')
        this.formData.videoUrlsParse = JSON.parse(item.videoUrls || '[]')
        this.formData.sceneImageUrlsParse = JSON.parse(item.sceneImageUrls || '[]')
        this.formData.sceneVideoUrlsParse = JSON.parse(item.sceneVideoUrls || '[]')
      })
    },
    // 图片视频回调
    imageUrlCallBack (data) {
      this.ZGformData.recUrls = JSON.stringify(data)
    },
    videoUrlCallBack (data) {
      this.ZGformData.revVideoUrls = JSON.stringify(data)
    },
    // 获取整改列表
    _rectifyInfoList (dangerId) {
      rectifyInfoList({ dangerId: dangerId }).then(res => {
        this.ZGFormList = res.rows
        res.rows.forEach(element => {
          element.recUrlsParse = []
          element.revVideoUrlsParse = []
          element.recUrlsParse = JSON.parse(element.recUrls || '[]')
          element.revVideoUrlsParse = JSON.parse(element.revVideoUrls || '[]')
        });
        this.ZGformData = res.rows
      })
    }
  },
}
</script>

<style scoped lang="scss">
.scroll {
  padding-top: 100upx;
}
.danger-loop-edit {
  display: flex;
  flex-direction: column;
  height: 100%;
  .evan-form {
    padding: 0 40upx;
    margin-top: 0upx;
    background-color: #fff;
  }
  .btn {
    margin-top: 40upx;
    display: flex;
    .submit {
      width: 90%;
      line-height: 80upx;
    }
  }
}
.form-input {
  font-size: 28upx;
  color: #333;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  height: 60upx;
  &.textarea {
    height: 110upx;
    padding: 24rpx 0;
    text-align: left;
  }
}
.img-cont {
  margin: auto;
  display: flex;
  align-items: center;
  .img-item {
    image {
      width: 25vw;
      height: 25vw;
      margin-right: 1vw;
      margin-top: 1vw;
    }
  }
}
.swiper-item {
  width: 100%;
  height: 100%;
}
.swiper {
  height: 200px;
}
</style>
